import React from 'react';
import { Menu, Dropdown, Button, message, Space, Tooltip } from 'antd';
import { DownOutlined,NumberOutlined,SettingOutlined,LeftCircleOutlined,RightCircleOutlined} from '@ant-design/icons';
import { Carousel } from 'antd';
import pg2 from '../../../../assets/pg2.png'
import pg3 from '../../../../assets/pg3.png'
import './index.css'
class AdminHotMap extends React.Component {
    constructor(props) {
        super(props);
        this.handleMenuClick = this.handleMenuClick.bind(this)
        this.handleonChange = this.handleonChange.bind(this)
        // this.handleNext = this.handleNext.bind(this)
        // this.handlePrev = this.handlePrev.bind(this)
    }
    
    handleonChange(a,b,c){
        console.log(a,b,c)
    }
    handleMenuClick(e) {
        message.info('Click on menu item.');
        console.log('click', e);
    }
    prev(){
        this.img.prev();
        console.log('2222')
    }
    next(){
        this.img.next();
        console.log('1111')
    }
    render() {
      // let datas = this.props.imgs.map((items,index)=>{
      //   <div>
      //     <img src={}/>
      //   </div>
      // })
      const menu3 = (
        <Menu>
          <Menu.Item>
            FSM:2
          </Menu.Item>
          <Menu.Item>
            安装位置：普光#2线#22闸室
          </Menu.Item>
          
        </Menu>
      );
        const menu = (
            <Menu onClick={this.handleMenuClick}>
              <Menu.Item key="1" icon={<SettingOutlined />}>
                FSM
              </Menu.Item>
              <Menu.Item key="2" icon={<SettingOutlined />}>
                EMAT
              </Menu.Item>
              <Menu.Item key="3" icon={<SettingOutlined />}>
                PZT
              </Menu.Item>
            </Menu>
          );
          const menu1 = (
            <Menu onClick={this.handleMenuClick}>
              <Menu.Item key="1" icon={<NumberOutlined />}>
                设备1
              </Menu.Item>
              <Menu.Item key="2" icon={<NumberOutlined />}>
                设备2
              </Menu.Item>
              <Menu.Item key="3" icon={<NumberOutlined />}>
                设备3
              </Menu.Item>
            </Menu>
          );
        return (
            <div>
                <div className='backGround'>
                    <Dropdown overlay={menu} className="menuButton">
                    <Button>
                        类型 <DownOutlined />
                    </Button>
                    </Dropdown>
                    <Dropdown overlay={menu1} className="menuButton">
                    <Button>
                        编号 <DownOutlined />
                    </Button>
                    </Dropdown>
                    <div className='bSign'>
                    <div className='box'><i className='b1'><p className='container'>FSM</p></i></div>
                    <div className='box'><i className='b2'><p className='container'>EMAT</p></i></div>
                    <div className='box'><i className='b3'><p className='container'>PZT</p></i></div>
                    </div>
                    <Dropdown overlay={menu3} placement="topCenter">
                      <div className='photoPoint'><div className='name'>F</div></div>
                    </Dropdown>
                    <div className='hot_Maps'>
                        <div className='hot_Map'>
                        <div className='left_Button'><LeftCircleOutlined style={{color:'#D3D3D3',fontSize:60+'px'}} onClick={this.prev.bind(this)}/></div>
                        <Carousel  ref={dom => { this.img = dom; }} dots={false} >
                            <div >
                            <img className='imgs' src={require('../../../../assets/pg1.png')} alt=""/>
                            </div>
                            <div><img className='imgs' src={pg2} alt=""/></div>
                            <div><img className='imgs' src={pg3} alt=""/></div>
                            {/* {datas} */}
                        </Carousel>
                        <div className='right_Button'><RightCircleOutlined style={{color:'#D3D3D3',fontSize:60+'px'}} onClick={this.next.bind(this)}/></div>
                        </div>
                    </div>
                    <div className='mapsName'>普光111号</div>
                </div>
            </div>
        )
    }
}

export default AdminHotMap;